<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	template="web/templates/ui.xhtml">

	<ui:define name="title">
		<h:outputText value="Administración de Perfiles" />
	</ui:define>
	<ui:define name="sidebar">
		<div class="widget">
			<div class="title">
				<div class="inner">
					<h3>
						<h:outputText value="Menú" />
					</h3>
				</div>
			</div>
			<!-- MENU PERFIL ADMINISTADOR -->
			<ui:include src="menu.xhtml" />
		</div>
	</ui:define>
	<ui:define name="content">
		<div class="page-header">
			<h3>
				<h:outputText value="Administración" />
			</h3>
		</div>
		<div class="subTitle">
			<ol class="breadcrumb">
				<li><a href="index.jsf"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">Perfiles</li>
			</ol>
		</div>
		<div class="page-subheader">
			<h3>Perfiles</h3>
		</div>
		<div class="gridContent">
			<div class="inner">
				<h:form id="form">
					<p:messages id="messages" redisplay="false" />
					<p:dataTable id="tablaPerfil" var="varPerfil"
							value="#{perfilService.listaPerfiles}"
							widgetVar="tablaPerfiles"
							emptyMessage="No se han encontrado registros" rows="10"
							paginator="true" paginatorPosition="bottom" currentPageReportTemplate="Total Registros : {totalRecords}"
							paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
						<p:column headerText="Id" style="width:50px;" >
							<h:outputText value="#{varPerfil.perfilId}" />
						</p:column>
						<p:column headerText="Perfil">
							<h:outputText value="#{varPerfil.perfil}" />
						</p:column>
						<p:column headerText="Estado" style="width:100px;">
							<h:outputText value="#{varPerfil.estado}" />
						</p:column>
						<p:column style="text-align: center; width:200px;">
							<f:facet name="header">
								Acciones
							</f:facet>
							
							
							<span style="color:#CBCBCB;#{varPerfil.estadoRegistro eq 'S'?'display:block;':'display:none'}">
								<p:commandLink update="tablaPerfil" id="deshabilitar" value="Deshabilitar" action="#{perfilService.deshabilitarPerfil(varPerfil)}"
								rendered="#{varPerfil.perfilId > 6 and varPerfil.totalUsuarios == 0}">
									<p:confirm header="Confirmación" message="¿Está seguro de deshabilitar el Perfil seleccionado?" icon="ui-icon-alert" />	
								</p:commandLink>
								&nbsp;&nbsp;
							</span>

							<span style="color:#CBCBCB;#{varPerfil.estadoRegistro eq 'N'?'display:block;':'display:none'}">
								<p:commandLink update="tablaPerfil" id="habilitar" value="Habilitar" action="#{perfilService.habilitarPerfil(varPerfil)}"
								rendered="#{varPerfil.perfilId > 6 and varPerfil.totalUsuarios == 0}" >
									<p:confirm header="Confirmación" message="¿Está seguro de habilitar el Perfil seleccionado?" icon="ui-icon-alert" />	
								</p:commandLink>
								&nbsp;&nbsp;
							</span>
							
							<p:commandLink id="ajaxEditarPerfil" oncomplete="muestraDialogoPerfil();"
								update=":formPerfil"
								actionListener="#{perfilService.editarPerfil}">
								<h:outputText value="Editar" />
								<f:setPropertyActionListener value="#{varPerfil}" target="#{perfilService.perfil}" />
							</p:commandLink>
							&nbsp;&nbsp;
							<p:commandLink id="ajaxOpcionesPerfil" update=":form:opciones"
								actionListener="#{perfilService.verOpcionesPerfil(varPerfil)}">
								<h:outputText value="Opciones" />
							</p:commandLink>
						</p:column>
					</p:dataTable>
					<p:panel id="panelBotones">		
					<div class="btnAction row no-gutter">
						<div class="row no-gutter text-right">
							<p:commandButton id="btnCrear" styleClass="btn btn-success" 
							update=":formPerfil"
							icon="ui-menuitem-icon ui-icon fa fa-plus" iconPos="right" value="Crear Perfil" 
							oncomplete="muestraDialogoPerfil();"
							actionListener="#{perfilService.nuevoPerfil}" >
							</p:commandButton>
						</div>
					</div>
					</p:panel>
					
					<p:panel id="opciones">
						<p:panel rendered="#{perfilService.perfil.perfilId > 0}">
							<div class="page-subheader">
								<h3>#{perfilService.tituloOpciones}</h3>
							</div>
							<p:dataTable id="tablaOpcionesPerfil" var="varOpcionPerfil"
									value="#{perfilService.listaOpcionesPerfil}"
									widgetVar="tablaOpcionesPerfil"
									emptyMessage="No se han encontrado registros" rows="60"
									paginator="true" paginatorPosition="bottom" currentPageReportTemplate="Total Registros : {totalRecords}"
									paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
								<p:column headerText="Opción" >
									<h:outputText value="#{varOpcionPerfil.opcion}" rendered="#{varOpcionPerfil.opcionId == varOpcionPerfil.opcionIdPadre}" 
									style="text-transform: uppercase; font-weight:bold;"/>
									<h:outputText value="#{varOpcionPerfil.opcion}" rendered="#{varOpcionPerfil.opcionId != varOpcionPerfil.opcionIdPadre}"/>
								</p:column>
								<p:column style="text-align: center; width:200px;">
									<f:facet name="header">
										Acciones
									</f:facet>
									<p:commandLink update="tablaOpcionesPerfil" id="deshabilitar" value="Eliminar"
									actionListener="#{perfilService.eliminarOpcion(varOpcionPerfil)}" 
									rendered="#{varOpcionPerfil.opcionId != varOpcionPerfil.opcionIdPadre}">
										<p:confirm header="Confirmación" message="¿Está seguro de eliminar la opción seleccionada?" icon="ui-icon-alert" />	
									</p:commandLink>
								</p:column>
							</p:dataTable>
							<p:panel id="panelBotonesOpciones">		
								<div class="btnAction row no-gutter">
									<div class="row no-gutter text-right">
										<p:commandButton id="btnAgregarOpcion" styleClass="btn btn-success" 
										update=":formOpcion"
										icon="ui-menuitem-icon ui-icon fa fa-plus" iconPos="right" 
										value="AgregarOpcion" 
										oncomplete="muestraDialogoOpcion();"
										actionListener="#{perfilService.agregarOpcion}" >
										</p:commandButton>
									</div>
								</div>
							</p:panel>
						</p:panel>
					</p:panel>
				</h:form>
			</div>
		</div>		
		<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" closeOnEscape="true" rendered="true">
			<p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
			<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
		</p:confirmDialog>
		
		<p:dialog width="700" widgetVar="perfilDialogo" modal="true"  resizable="false" closeOnEscape="true">
			<h:form id="formPerfil" >
				<p:messages id="messagesPerfil" redisplay="false" />
		        <div class="page-subheader">
					<h3>#{perfilService.tituloVentana}</h3>
				</div>
				<div class="row no-gutter">
					<div class="col-sm-12 form-group">
						<p:outputLabel id="lblPerfil" for="txtPerfil" value="Descripción del Perfil" />
						<p:inputText id="txtPerfil" value="#{perfilService.perfil.perfil}" maxlength="100" required="true" requiredMessage="Ingrese Descripción" 
						validator="#{perfilService.validarDescripcion}" autocomplete="off" />
					</div>
				</div>
				<div class="row no-gutter">
					<div class="col-sm-12 form-group">
						<p:outputLabel id="lblMensaje" for="txtMensaje" value="Mensaje de Bienvenida" />
						<p:editor id="txtMensaje" value="${perfilService.perfil.mensaje}" height="240"/>
					</div>
				</div>
				<div class="btnAction row no-gutter">
					<div class="text-right">
						<p:commandButton id="cancelPerfil" styleClass="btn btn-success"
							value="Cancelar" oncomplete="PF('perfilDialogo').hide();" 
							icon="fa fa-undo" iconPos="right" />
						<p:commandButton id="addPerfil" styleClass="btn btn-success"
							update=":form:tablaPerfil messagesPerfil " value="Grabar" 
							actionListener="#{perfilService.grabarPerfil}" 
							oncomplete="handlePerfilRequest(xhr, status, args); "
							icon="fa fa-floppy-o" iconPos="right"/>
					</div>
				</div>
			</h:form>
		</p:dialog>
		
		<p:dialog width="500" widgetVar="opcionDialogo" modal="true" showEffect="fade" hideEffect="fade" resizable="false" closeOnEscape="true">
			<h:form id="formOpcion" >
				<p:messages id="messagesOpcion" redisplay="false" />
		        <div class="page-subheader">
					<h3>#{perfilService.tituloVentana}</h3>
				</div>
				<div class="row no-gutter">
					<div class="col-sm-12 form-group">
						<p:outputLabel id="lblOpcion" for="cboOpcion" value="Menu" />
						<h:selectOneMenu id="cboOpcion" value="#{perfilService.opcionPerfil.opcionIdPadre}"
							styleClass="form-control" required="true" 
							requiredMessage="Seleccione menú.">
							<f:selectItem itemLabel="Seleccione Menu" itemValue="" noSelectionOption="true" />
							<p:ajax listener="#{perfilService.onOpcionChange}" update="subOpcion" />
			                <f:selectItems value="#{perfilService.listaOpciones}" var="entidad" itemLabel="#{entidad.nombre}" itemValue="#{entidad.id}" />
						</h:selectOneMenu>
					</div>
					<div class="col-sm-12 form-group">
						<p:outputLabel id="lblSubOpcion" for="cboOpcion" value="Opciones" />
						<p:panel id="subOpcion">
							<h:selectOneMenu id="opcion" value="#{perfilService.opcionPerfil.opcionId}"
								styleClass="form-control" required="true" 
								requiredMessage="Seleccione Opción.">
								<f:selectItem itemLabel="Seleccione Opción" itemValue="" noSelectionOption="true" />
				                <f:selectItems value="#{perfilService.listaSubOpciones}" var="entidad" itemLabel="#{entidad.nombre}" itemValue="#{entidad.id}" />
							</h:selectOneMenu>
						</p:panel>
					</div>
					<div class="col-sm-3 form-group">
						<p:outputLabel id="lblchkConsultar" for="chkConsultar" value="Solo Consulta" />
						<h:selectBooleanCheckbox id="chkConsultar" value="#{perfilService.soloConsulta}" />
					</div>
				</div>
				<div class="btnAction row no-gutter">
					<div class="text-right">
						<p:commandButton id="cancelOpcion" styleClass="btn btn-success"
							value="Cancelar" oncomplete="PF('opcionDialogo').hide();" 
							icon="fa fa-undo" iconPos="right" />
						<p:commandButton id="addOpcion" styleClass="btn btn-success"
							update=":form:opciones messagesOpcion" value="Grabar" 
							actionListener="#{perfilService.grabarOpcion}" 
							oncomplete="handleOpcionRequest(xhr, status, args); "
							icon="fa fa-floppy-o" iconPos="right"/>
					</div>
				</div>
			</h:form>
		</p:dialog>
		
	</ui:define>
</ui:composition>